Animations এবং Motion

Flutter এ Animations এবং Motion হলো একটি অত্যন্ত গুরুত্বপূর্ণ এবং শক্তিশালী ফিচার, যা অ্যাপ্লিকেশনকে ডায়নামিক, আকর্ষণীয়, এবং ইন্টারেকটিভ করে তোলে। Animations ব্যবহার করে আপনি UI এর বিভিন্ন উপাদানকে মসৃণভাবে পরিবর্তন করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। Flutter এ Animations তৈরি করার জন্য বেশ কিছু বিল্ট-ইন উইজেট এবং ক্লাস আছে, যেমন AnimationController, Tween, AnimatedWidget, এবং AnimationBuilder।

Animations এবং Motion এর প্রকারভেদ:

1. Basic Animation: সহজ ট্রানজিশন বা উইজেটের সরল পরিবর্তন।
2. Implicit Animations: Flutter এর বিল্ট-ইন Implicitly Animated Widgets যেমন AnimatedContainer, AnimatedOpacity।
3. Explicit Animations: AnimationController এবং Tween ব্যবহার করে কাস্টম এবং জটিল এনিমেশন।
4. Hero Animations: একটি স্ক্রিন থেকে অন্য স্ক্রিনে ট্রানজিশনের সময় উইজেটের এনিমেশন।
5. Physics-based Animations: জড়তা, স্প্রিংস ইত্যাদির উপর ভিত্তি করে এনিমেশন।

১. Implicit Animations:

Implicit Animations হলো সহজ এনিমেশন, যেখানে Flutter এর বিল্ট-ইন উইজেট ব্যবহার করে স্বয়ংক্রিয়ভাবে এনিমেশন তৈরি করা যায়।

AnimatedContainer উদাহরণ:

import 'package:flutter/material.dart';

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool _isExpanded = false;

  void _toggleContainer() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animated Container Example')),
      body: Center(
        child: GestureDetector(
          onTap: _toggleContainer,
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            width: _isExpanded ? 200.0 : 100.0,
            height: _isExpanded ? 200.0 : 100.0,
            color: _isExpanded ? Colors.blue : Colors.red,
            alignment: Alignment.center,
            curve: Curves.easeInOut,
            child: Text('Tap Me', style: TextStyle(color: Colors.white)),
          ),
        ),
      ),
    );
  }
}

• AnimatedContainer: এটি একটি কন্টেইনার, যার প্রোপার্টিগুলি (যেমন: সাইজ, কালার) পরিবর্তন করা হলে স্বয়ংক্রিয়ভাবে এনিমেট করে।
• duration: এনিমেশন কত সময় ধরে চলবে তা নির্ধারণ করে।
• curve: এনিমেশন কিভাবে ঘটবে (লিনিয়ার, ইজি ইন আউট ইত্যাদি)।

২. Explicit Animations:

Explicit Animations কাস্টমাইজড এবং জটিল এনিমেশন তৈরিতে ব্যবহৃত হয়। এগুলোতে AnimationController এবং Tween ব্যবহার করা হয়।

Scale Animation উদাহরণ:

import 'package:flutter/material.dart';

class ScaleAnimationExample extends StatefulWidget {
  @override
  _ScaleAnimationExampleState createState() => _ScaleAnimationExampleState();
}

class _ScaleAnimationExampleState extends State<ScaleAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _animation = Tween<double>(begin: 0.5, end: 1.5).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Scale Animation Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Transform.scale(
              scale: _animation.value,
              child: child,
            );
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

• AnimationController: এনিমেশনের দৈর্ঘ্য এবং সময় কনফিগার করে।
• Tween: এনিমেশনের শুরু এবং শেষ মান নির্ধারণ করে।
• AnimatedBuilder: এনিমেশনের সাথে সংযুক্ত একটি বিল্ডার উইজেট, যা UI আপডেট করে।

৩. Hero Animations:

Hero এনিমেশন দুইটি স্ক্রিনের মধ্যে একটি উইজেটের ট্রানজিশন এনিমেট করতে ব্যবহৃত হয়। এটি Flutter এ খুব সহজেই ইমপ্লিমেন্ট করা যায় এবং একটি স্ক্রিন থেকে অন্য স্ক্রিনে একটি সাধারণ এলিমেন্টের মসৃণ এনিমেশন তৈরি করে।

Hero Animation উদাহরণ:

import 'package:flutter/material.dart';

class HeroAnimationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hero Animation Example')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (_) {
              return DetailScreen();
            }));
          },
          child: Hero(
            tag: 'hero-tag',
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Screen')),
      body: Center(
        child: Hero(
          tag: 'hero-tag',
          child: Container(
            width: 300,
            height: 300,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

• Hero: এটি একটি উইজেট, যা একটি স্ক্রিন থেকে অন্য স্ক্রিনে ট্রানজিশনের সময় এনিমেশন করে।
• tag: Hero এনিমেশনটি কিভাবে দুটি স্ক্রিনের মধ্যে সংযুক্ত হবে, তা নির্ধারণ করে।

৪. Physics-based Animations:

Flutter এ স্প্রিং, জড়তা, ইত্যাদির উপর ভিত্তি করে এনিমেশন করা যায়, যা বাস্তব জগতের পদার্থবিজ্ঞান মডেল ফলো করে। এটি সাধারণত AnimatedPhysics এবং SpringSimulation এর মাধ্যমে করা হয়।

Spring Animation উদাহরণ:

import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';

class PhysicsAnimationExample extends StatefulWidget {
  @override
  _PhysicsAnimationExampleState createState() => _PhysicsAnimationExampleState();
}

class _PhysicsAnimationExampleState extends State<PhysicsAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );

    final spring = SpringDescription(
      mass: 1,
      stiffness: 100,
      damping: 1,
    );

    _animation = _controller.drive(
      Tween<Offset>(begin: Offset(0, -1), end: Offset(0, 0)),
    );

    _controller.animateWith(SpringSimulation(spring, 0, 1, 0));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Physics-based Animation Example')),
      body: Center(
        child: SlideTransition(
          position: _animation,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

• SpringSimulation: একটি ফিজিক্স মডেল যা স্প্রিং এর মতো মুভমেন্ট তৈরি করে।
• SlideTransition: একটি ট্রানজিশন এনিমেশন যা পজিশন পরিবর্তন করে।

৫. AnimationBuilder এবং Tween Animation:

AnimationBuilder একটি কাস্টম এনিমেশন তৈরিতে ব্যবহৃত হয়, যেখানে Tween এর মাধ্যমে এনিমেশনের মান পরিবর্তন করা যায়।

import 'package:flutter/material.dart';

class TweenAnimationExample extends StatefulWidget {
  @override
  _TweenAnimationExampleState createState() => _TweenAnimationExampleState();
}

class _TweenAnimationExampleState extends State<TweenAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue).animate(_controller);

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tween Animation Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _colorAnimation,
          builder: (context, child) {
            return Container(
              width: 100,
              height: 100,
              color: _colorAnimation.value,
            );
          },
        ),
      ),
    );
  }
}

Flutter এ Animations এবং Motion এর সেরা চর্চা:

1. Reusability নিশ্চিত করুন: AnimationController এবং Tween রিইউজ করার মতোভাবে তৈরি করুন, যাতে কোড পুনঃব্যবহার করা যায়।
2. Performance অপ্টিমাইজ করুন: AnimationController এ সর্বনিম্ন ওভারহেড নিশ্চিত করুন, যাতে অ্যাপ পারফরম্যান্স বজায় থাকে।
3. Curves ব্যবহার করুন: Curves ব্যবহার করে এনিমেশনের ডাইনামিক অ্যাকশন নিশ্চিত করুন, যা মসৃণ এবং বাস্তবসম্মত দেখায়।

Flutter এ Animations এবং Motion ব্যবহারের মাধ্যমে একটি আকর্ষণীয় এবং ইন্টারেকটিভ অ্যাপ্লিকেশন তৈরি করা সম্ভব, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।

Flutter এ বেসিক Animations ব্যবহার করে UI কে আরও প্রাণবন্ত এবং ইন্টারেক্টিভ করা যায়। Flutter এর animation framework ব্যবহার করে সহজেই ফেইড ইন/আউট, স্লাইড, স্কেল, রোটেশন, ইত্যাদি বিভিন্ন অ্যানিমেশন তৈরি করা সম্ভব। নিচে বেসিক অ্যানিমেশন সেটআপ করার ধাপ এবং উদাহরণ আলোচনা করা হলো।

Flutter এ অ্যানিমেশন সেটআপ করার ধাপ:

ধাপ ১: একটি StatefulWidget তৈরি করা:

• অ্যানিমেশন পরিচালনা করার জন্য StatefulWidget ব্যবহার করতে হবে, কারণ অ্যানিমেশন চলাকালীন স্টেট পরিবর্তন হয় এবং Widget পুনরায় রেন্ডার হতে পারে।

ধাপ ২: AnimationController এবং Animation সেটআপ করা:

• AnimationController একটি ক্লাস যা অ্যানিমেশন শুরু, থামানো এবং রিপ্লে করার জন্য ব্যবহৃত হয়।
• Animation একটি ক্লাস যা অ্যানিমেশন এর মান পরিবর্তন করে, যা AnimationController দ্বারা নিয়ন্ত্রিত হয়।

ধাপ ৩: initState মেথডে অ্যানিমেশন কনফিগার করা:

• AnimationController এবং Animation সেটআপ করা হয় এবং তাদের জন্য প্রয়োজনীয় ডিউরেশন (সময়) এবং অন্যান্য প্যারামিটার দেওয়া হয়।

Flutter এ একটি বেসিক অ্যানিমেশন উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Basic Animation Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animation Demo'),
        ),
        body: Center(
          child: AnimatedBox(),
        ),
      ),
    );
  }
}

class AnimatedBox extends StatefulWidget {
  @override
  _AnimatedBoxState createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    _animation = Tween<double>(begin: 50.0, end: 200.0).animate(_controller)
      ..addListener(() {
        setState(() {});
      });

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _animation.value,
      height: _animation.value,
      color: Colors.blue,
    );
  }
}

উদাহরণের ব্যাখ্যা:

AnimationController:

• _controller হলো একটি AnimationController যা ২ সেকেন্ডের ডিউরেশন নিয়ে কনফিগার করা হয়েছে।
• vsync এর জন্য SingleTickerProviderStateMixin ব্যবহার করা হয়েছে, যা অ্যানিমেশন ফ্রেমের সময় নির্ধারণ করে।

Animation এবং Tween:

• _animation একটি Tween এর মাধ্যমে কনফিগার করা হয়েছে, যা ৫০ থেকে ২০০ পিক্সেল পর্যন্ত আকার পরিবর্তন করে।
• addListener দিয়ে প্রতিটি ফ্রেমে setState কল করা হয়েছে, যাতে UI আপডেট হয়।

repeat এবং reverse:

• _controller.repeat(reverse: true) ব্যবহার করে অ্যানিমেশনটি বারবার চালানো হয় এবং রিভার্স হয়ে আবার শুরু হয়।

Flutter এর বেসিক অ্যানিমেশনের কিছু প্রকার:

১. Fade Transition (ফেইড ট্রানজিশন):

• FadeTransition ব্যবহার করে একটি Widget এর opacity পরিবর্তন করা যায়।
• উদাহরণ:

FadeTransition(
  opacity: _animation,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

২. Scale Animation (স্কেল অ্যানিমেশন):

• ScaleTransition ব্যবহার করে একটি Widget এর আকার পরিবর্তন করা যায়।
• উদাহরণ:

ScaleTransition(
  scale: _animation,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
  ),
)

৩. Rotation Animation (রোটেশন অ্যানিমেশন):

• RotationTransition ব্যবহার করে একটি Widget কে ঘুরানো যায়।
• উদাহরণ:

RotationTransition(
  turns: _animation,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

AnimatedWidget এবং AnimatedBuilder:

Flutter এ অ্যানিমেশন পরিচালনা করতে AnimatedWidget এবং AnimatedBuilder ক্লাস ব্যবহার করা হয়।

AnimatedWidget:

• এটি একটি সহজ উপায় যেখানে একটি Widget এর পরিবর্তন সহজে দেখা যায়।
• উদাহরণ:

class ScalingBox extends AnimatedWidget {
  ScalingBox({Key? key, required Animation<double> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Container(
      width: animation.value,
      height: animation.value,
      color: Colors.orange,
    );
  }
}

AnimatedBuilder:

• এটি একটি ফাংশনাল স্টাইল যা Widget এর গঠন আরও ম্যানেজেবল করে।
• উদাহরণ:

AnimatedBuilder(
  animation: _animation,
  builder: (context, child) {
    return Transform.scale(
      scale: _animation.value,
      child: child,
    );
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.purple,
  ),
)

Flutter এর প্রি-বিল্ট অ্যানিমেটেড Widgets:

Flutter এ কিছু প্রি-বিল্ট অ্যানিমেটেড Widgets রয়েছে যা সহজেই ব্যবহার করা যায়:

• AnimatedContainer: একটি Container এর বিভিন্ন প্রপার্টি (যেমন সাইজ, কালার) পরিবর্তন করতে।
• AnimatedOpacity: একটি Widget এর opacity পরিবর্তন করতে।
• AnimatedPositioned: Positioned Widget এর স্থান পরিবর্তন করতে।
• AnimatedAlign: Widget এর অ্যালাইনমেন্ট পরিবর্তন করতে।

AnimatedContainer উদাহরণ:

AnimatedContainer(
  duration: Duration(seconds: 2),
  width: _isExpanded ? 200.0 : 100.0,
  height: _isExpanded ? 200.0 : 100.0,
  color: _isExpanded ? Colors.blue : Colors.red,
  child: Text('Tap to Animate'),
)

Flutter এ বেসিক অ্যানিমেশন সংক্ষেপে:

• AnimationController এবং Animation ব্যবহার করে কাস্টম অ্যানিমেশন তৈরি করা যায়।
• FadeTransition, ScaleTransition, এবং RotationTransition এর মতো প্রি-বিল্ট অ্যানিমেটেড Widgets ব্যবহার করে সহজেই অ্যানিমেশন তৈরি করা যায়।
• AnimatedWidget এবং AnimatedBuilder ব্যবহার করে Widget এর অ্যানিমেশন সহজ এবং কার্যকর উপায়ে কাস্টমাইজ করা যায়।
• AnimatedContainer এর মত প্রি-বিল্ট ক্লাস দিয়ে আরও দ্রুত এবং সহজে অ্যানিমেশন করা যায়।

Flutter এ এই বেসিক অ্যানিমেশনগুলো ব্যবহার করে আপনার অ্যাপের UI কে আরও প্রাণবন্ত এবং ইন্টারেক্টিভ করা সম্ভব।

Flutter এ Implicit Animations এবং Explicit Animations হলো দুটি ভিন্ন ধরনের অ্যানিমেশন কৌশল। উভয়ই UI কে আরও ডাইনামিক এবং ইন্টারেক্টিভ করতে ব্যবহৃত হয়, তবে এগুলোর ব্যবহারের পদ্ধতি এবং কনট্রোলের পরিমাণ ভিন্ন। নিচে Implicit এবং Explicit Animations এর পার্থক্য এবং তাদের উদাহরণ তুলে ধরা হলো।

Implicit Animations:

Implicit Animations হলো প্রাক-নির্ধারিত এবং সহজে ব্যবহারের জন্য তৈরি করা অ্যানিমেশন, যা UI উপাদানগুলির ভ্যালু পরিবর্তন করার সময় স্বয়ংক্রিয়ভাবে ট্রাঞ্জিশন তৈরি করে। Flutter এ ইমপ্লিসিট অ্যানিমেশন ব্যবহারের জন্য কোনো অ্যানিমেশন কন্ট্রোলারের প্রয়োজন হয় না, যা এটি ব্যবহারে সহজ এবং দ্রুত করে তোলে।

বৈশিষ্ট্য:

• স্বয়ংক্রিয়ভাবে কাজ করে, খুব সহজে কনফিগার করা যায়।
• কোডিং কমপ্লেক্সিটি কম।
• সাধারণত রঙ, অবস্থান, আকার, বা অপাসিটির মত সাধারণ পরিবর্তনের জন্য ব্যবহৃত হয়।

উদাহরণ (Implicit Animation):

import 'package:flutter/material.dart';

class ImplicitAnimationExample extends StatefulWidget {
  @override
  _ImplicitAnimationExampleState createState() => _ImplicitAnimationExampleState();
}

class _ImplicitAnimationExampleState extends State<ImplicitAnimationExample> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Implicit Animation Example')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
            });
          },
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            width: _isExpanded ? 200.0 : 100.0,
            height: _isExpanded ? 200.0 : 100.0,
            color: _isExpanded ? Colors.blue : Colors.red,
            child: Center(child: Text('Tap me!')),
          ),
        ),
      ),
    );
  }
}

• AnimatedContainer: এটি একটি Implicit Animation Widget যা যখন কোনো প্রপার্টি (যেমন, আকার বা রঙ) পরিবর্তন হয়, তখন সেটি মসৃণভাবে অ্যানিমেট করে।
• duration: অ্যানিমেশনের দৈর্ঘ্য কনফিগার করে।
• setState: UI আপডেট করে এবং অ্যানিমেশন ট্রিগার করে।

Explicit Animations:

Explicit Animations আপনাকে অ্যানিমেশন কন্ট্রোল এবং কাস্টমাইজেশনের পূর্ণ ক্ষমতা দেয়। এখানে আপনাকে একটি AnimationController এবং Animation অবজেক্ট ব্যবহার করতে হয়, যা অ্যানিমেশন স্টার্ট, স্টপ, রিপিট এবং রিভার্স করতে ব্যবহৃত হয়। এই অ্যানিমেশনগুলি জটিল এবং কাস্টম অ্যানিমেশন তৈরি করতে সহায়ক।

বৈশিষ্ট্য:

• পূর্ণ কন্ট্রোল এবং কাস্টমাইজেশন প্রদান করে।
• জটিল এবং কাস্টম অ্যানিমেশন তৈরি করতে সক্ষম।
• AnimationController এবং Tween ব্যবহৃত হয়।

উদাহরণ (Explicit Animation):

import 'package:flutter/material.dart';

class ExplicitAnimationExample extends StatefulWidget {
  @override
  _ExplicitAnimationExampleState createState() => _ExplicitAnimationExampleState();
}

class _ExplicitAnimationExampleState extends State<ExplicitAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _animation = Tween<double>(begin: 0, end: 300).animate(_controller)
      ..addListener(() {
        setState(() {});
      });

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Explicit Animation Example')),
      body: Center(
        child: Container(
          width: _animation.value,
          height: _animation.value,
          color: Colors.blue,
        ),
      ),
    );
  }
}

• AnimationController: এটি Explicit Animation এর মূল কন্ট্রোলার, যা অ্যানিমেশনের সময়কাল এবং চলাচল পরিচালনা করে।
• Tween: এটি স্টার্ট এবং এন্ড ভ্যালু নির্ধারণ করে এবং সেই ভ্যালুগুলোর মধ্যে মসৃণ পরিবর্তন করে।
• addListener: অ্যানিমেশনের প্রতি ফ্রেম আপডেটের সময় সেটি UI পুনরায় রেন্ডার করে।

Implicit এবং Explicit Animations এর পার্থক্য:

কখন কোনটি ব্যবহার করবেন:

Implicit Animations: যখন অ্যানিমেশন সহজ এবং সাধারণ যেমন রঙ পরিবর্তন, অবস্থান পরিবর্তন, বা সাইজ পরিবর্তনের প্রয়োজন হয়, তখন Implicit Animations ব্যবহার করা সবচেয়ে ভালো। এটি সহজে কনফিগার করা যায় এবং দ্রুত ইমপ্লিমেন্ট করা যায়।

Explicit Animations: যদি আপনার জটিল অ্যানিমেশন, পূর্ণ কন্ট্রোল এবং কাস্টমাইজড ট্রানজিশন প্রয়োজন হয়, তাহলে Explicit Animations ব্যবহার করা সেরা। এটি আপনাকে অ্যানিমেশন স্টার্ট, স্টপ, রিপিট এবং রিভার্স করার পূর্ণ ক্ষমতা দেয়, যা জটিল ইউজার ইন্টারফেস তৈরি করতে সহায়ক।

Flutter এ কিছু জনপ্রিয় Implicit এবং Explicit Animation Widgets:

Implicit Animation Widgets:

• AnimatedContainer: আকার, রঙ, মার্জিন, বর্ডার রেডিয়াস ইত্যাদি অ্যানিমেট করতে ব্যবহার করা হয়।
• AnimatedOpacity: উইজেটের অপাসিটি পরিবর্তন করতে ব্যবহার করা হয়।
• AnimatedAlign: উইজেটের পজিশন পরিবর্তন করতে ব্যবহার করা হয়।
• AnimatedPadding: উইজেটের প্যাডিং পরিবর্তন করতে ব্যবহার করা হয়।

Explicit Animation Widgets:

• AnimatedBuilder: কাস্টম অ্যানিমেশন তৈরি করতে এবং UI কে রিফ্রেশ করতে সহায়ক।
• TweenAnimationBuilder: টুইনের মাধ্যমে কাস্টম অ্যানিমেশন তৈরি করা যায়।
• AnimatedWidget: এটি একটি বেসিক ক্লাস, যা কাস্টম অ্যানিমেশন তৈরি করতে সহায়তা করে।

Flutter এ Implicit এবং Explicit Animations এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনকে ইন্টারেক্টিভ এবং আকর্ষণীয় করে তুলতে পারেন। আপনার প্রয়োজন অনুসারে এবং অ্যানিমেশনের জটিলতা অনুযায়ী এই দুটি পদ্ধতির মধ্যে সঠিকটি বেছে নিন।

Flutter এ AnimationController এবং Custom Animations ব্যবহার করে আপনি জটিল এবং কাস্টমাইজড এনিমেশন তৈরি করতে পারেন। AnimationController একটি অত্যন্ত শক্তিশালী টুল, যা আপনার এনিমেশনের সময়কাল, শুরু এবং শেষ বিন্দু, লুপিং এবং অন্যান্য ডাইনামিক কনফিগারেশন পরিচালনা করতে সক্ষম।

AnimationController কী?

AnimationController হলো একটি ক্লাস যা এনিমেশন কন্ট্রোল করার জন্য ব্যবহৃত হয়। এটি TickerProvider এর সাথে সংযুক্ত থাকে এবং এনিমেশনের সময়কাল এবং স্টেট পরিচালনা করে। এটি আপনাকে এনিমেশন শুরু, থামানো, লুপ করা, বা পরিবর্তন করা ইত্যাদি কন্ট্রোল দিতে সক্ষম করে।

AnimationController এর প্রধান বৈশিষ্ট্য:

• duration: এনিমেশনের সময়কাল সেট করে।
• forward() এবং reverse(): এনিমেশন শুরু এবং রিভার্স করে।
• repeat(): এনিমেশন লুপ করে।
• stop(): এনিমেশন বন্ধ করে।
• reset(): এনিমেশন পুনরায় শুরু অবস্থায় নিয়ে যায়।

Custom Animation তৈরি করার ধাপসমূহ:

1. AnimationController তৈরি করুন।
2. Tween দিয়ে এনিমেশনের শুরু এবং শেষ মান নির্ধারণ করুন।
3. CurvedAnimation দিয়ে এনিমেশনে কাস্টম কার্ভ যোগ করুন।
4. AnimatedBuilder বা AnimationListener ব্যবহার করে এনিমেশন আপডেট এবং UI রিফ্রেশ করুন।

AnimationController এর উদাহরণ:

import 'package:flutter/material.dart';

class AnimationControllerExample extends StatefulWidget {
  @override
  _AnimationControllerExampleState createState() => _AnimationControllerExampleState();
}

class _AnimationControllerExampleState extends State<AnimationControllerExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );

    _controller.repeat(reverse: true); // এনিমেশন রিপিট করা হচ্ছে
  }

  @override
  void dispose() {
    _controller.dispose(); // কন্ট্রোলার বন্ধ করা
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animation Controller Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Opacity(
              opacity: _animation.value,
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
            );
          },
        ),
      ),
    );
  }
}

• AnimationController: এনিমেশন পরিচালনার জন্য তৈরি করা হয়।
• Tween<double>: একটি ডাবল ভ্যালু নিয়ে কাজ করে এবং এর শুরু এবং শেষ মান নির্ধারণ করে।
• CurvedAnimation: এনিমেশনে একটি কার্ভ যোগ করে, যা এনিমেশনকে মসৃণ করে তোলে।
• AnimatedBuilder: এনিমেশনের মান পরিবর্তন হলে UI রিফ্রেশ করে।

Custom Animations:

Custom Animations তৈরি করতে আপনি AnimationController এর সাথে Tween, CurvedAnimation, এবং Transform এর মতো উইজেট ব্যবহার করতে পারেন।

Custom Scale Animation উদাহরণ:

import 'package:flutter/material.dart';

class ScaleAnimationExample extends StatefulWidget {
  @override
  _ScaleAnimationExampleState createState() => _ScaleAnimationExampleState();
}

class _ScaleAnimationExampleState extends State<ScaleAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _scaleAnimation = Tween<double>(begin: 0.5, end: 1.5).animate(
      CurvedAnimation(parent: _controller, curve: Curves.elasticInOut),
    );

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Scale Animation Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _scaleAnimation,
          builder: (context, child) {
            return Transform.scale(
              scale: _scaleAnimation.value,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            );
          },
        ),
      ),
    );
  }
}

• Transform.scale: এনিমেশন অনুযায়ী স্কেলিং পরিবর্তন করে।
• CurvedAnimation: Curves.elasticInOut ব্যবহার করে স্প্রিং-এর মতো মুভমেন্ট তৈরি করা হয়েছে।

AnimationController এর সাথে Color Tween ব্যবহার:

Flutter এ ColorTween ব্যবহার করে এনিমেশনে রঙ পরিবর্তন করা যায়।

Color Animation উদাহরণ:

import 'package:flutter/material.dart';

class ColorAnimationExample extends StatefulWidget {
  @override
  _ColorAnimationExampleState createState() => _ColorAnimationExampleState();
}

class _ColorAnimationExampleState extends State<ColorAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Color Animation Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _colorAnimation,
          builder: (context, child) {
            return Container(
              width: 200,
              height: 200,
              color: _colorAnimation.value,
            );
          },
        ),
      ),
    );
  }
}

• ColorTween: দুটি রঙের মধ্যে এনিমেশন করে।
• CurvedAnimation: রঙের এনিমেশনে কার্ভ যোগ করে, যা পরিবর্তনকে মসৃণ করে তোলে।

AnimationListener এবং setState ব্যবহার করে Custom Animation:

AnimationListener ব্যবহার করে এনিমেশন পরিবর্তন হলে UI আপডেট করা যায়।

import 'package:flutter/material.dart';

class CustomAnimationListenerExample extends StatefulWidget {
  @override
  _CustomAnimationListenerExampleState createState() => _CustomAnimationListenerExampleState();
}

class _CustomAnimationListenerExampleState extends State<CustomAnimationListenerExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _opacityAnimation;
  double _currentOpacity = 1.0;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _opacityAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(_controller)
      ..addListener(() {
        setState(() {
          _currentOpacity = _opacityAnimation.value;
        });
      });

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Animation Listener Example')),
      body: Center(
        child: Opacity(
          opacity: _currentOpacity,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.purple,
          ),
        ),
      ),
    );
  }
}

• addListener(): AnimationController এ পরিবর্তন ঘটলে UI আপডেট করতে সেট করা হয়েছে।
• setState(): এনিমেশনের মান পরিবর্তন হলে UI রিফ্রেশ করা হয়।

AnimationController এবং Custom Animations এর সেরা চর্চা:

1. AnimationController সঠিকভাবে dispose করুন: AnimationController এর মেমোরি লিক এড়ানোর জন্য dispose() মেথডে বন্ধ করে দিন।
2. CurvedAnimation ব্যবহার করুন: এনিমেশন মসৃণ এবং বাস্তবসম্মত দেখানোর জন্য কার্ভ ব্যবহার করুন।
3. AnimatedBuilder ব্যবহার করুন: এটি কোড রিইউজ করা সহজ করে এবং এনিমেশন আপডেটের সময় UI রিফ্রেশ করে।

উপসংহার:

Flutter এ AnimationController এবং Custom Animations ব্যবহার করে একটি ডাইনামিক এবং ইন্টারেকটিভ অ্যাপ্লিকেশন তৈরি করা যায়। AnimationController এবং Tween এর মাধ্যমে কাস্টম এনিমেশন তৈরি করা সহজ, এবং CurvedAnimation যোগ করে এনিমেশনকে আরো বাস্তবসম্মত এবং মসৃণ করা যায়।

Flutter এ Hero Animation এবং Staggered Animations ব্যবহার করে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ UI তৈরি করা যায়। এগুলো অ্যাপের বিভিন্ন অংশের মধ্যে সুসংগতভাবে অ্যানিমেশন তৈরি করতে সাহায্য করে। নিচে এই অ্যানিমেশনগুলো কীভাবে কাজ করে এবং সেগুলো কনফিগার করার ধাপ এবং উদাহরণ নিয়ে আলোচনা করা হলো।

১. Hero Animation:

Hero Animation কী?

• Hero Animation একটি Flutter এর প্রি-বিল্ট অ্যানিমেশন যা দুটি স্ক্রিনের মধ্যে একটি Widget কে অ্যানিমেট করে। উদাহরণস্বরূপ, একটি ইমেজ বা বাটন একটি স্ক্রিন থেকে আরেকটি স্ক্রিনে সুসংগতভাবে ট্রানজিশন করে গেলে, Hero Animation ব্যবহার করা যায়।
• এটি সাধারণত স্ক্রিন পরিবর্তনের সময় সুনির্দিষ্ট Widget এর উপর ফোকাস রাখে এবং অ্যানিমেট করে।

Hero Animation সেটআপ করার ধাপ:

1. Hero Widget: আপনি যে Widget কে অ্যানিমেট করতে চান সেটিকে Hero Widget দিয়ে Wrap করুন।
2. tag প্রপার্টি ব্যবহার করে একটি ইউনিক নাম দিন, যাতে Flutter একই Widget কে দুটি স্ক্রিনের মধ্যে সংযুক্ত করতে পারে।

Hero Animation এর উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hero Animation Example',
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Hero(
            tag: 'hero-image',
            child: Image.network(
              'https://via.placeholder.com/150',
              width: 150.0,
              height: 150.0,
            ),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'hero-image',
          child: Image.network(
            'https://via.placeholder.com/300',
            width: 300.0,
            height: 300.0,
          ),
        ),
      ),
    );
  }
}

উদাহরণের ব্যাখ্যা:

• FirstScreen এ একটি ইমেজ আছে যা Hero Widget দিয়ে Wrap করা হয়েছে এবং একটি ইউনিক tag দেওয়া হয়েছে: 'hero-image'।
• যখন এই ইমেজে ট্যাপ করা হয়, তখন SecondScreen এ নেভিগেট করা হয় এবং দ্বিতীয় স্ক্রিনেও একই tag দিয়ে একই ইমেজ রাখা হয়। ফলে Flutter দুই স্ক্রিনের ইমেজগুলোর মধ্যে অ্যানিমেশন করে।
• Flutter স্বয়ংক্রিয়ভাবে প্রথম স্ক্রিনের ইমেজ থেকে দ্বিতীয় স্ক্রিনের ইমেজে একটি মসৃণ ট্রানজিশন তৈরি করে।

২. Staggered Animations:

Staggered Animation কী?

• Staggered Animation হলো এমন একটি অ্যানিমেশন যেখানে একাধিক অ্যানিমেশন সিকোয়েন্স বা ধাপে ধাপে শুরু হয়, যাতে অ্যানিমেশনগুলি ক্রমানুসারে বা ধারাবাহিকভাবে সম্পন্ন হয়।
• উদাহরণস্বরূপ, আপনি যদি একটি UI এ বিভিন্ন উপাদানগুলোর জন্য একটির পর একটি অ্যানিমেশন তৈরি করতে চান, তাহলে Staggered Animation ব্যবহার করতে পারেন।

Staggered Animation সেটআপ করার ধাপ:

1. AnimationController এবং Tween ব্যবহার করে একাধিক অ্যানিমেশন সেটআপ করুন।
2. Animation এর ভ্যালুগুলোকে বিভিন্ন ধাপে ভাগ করুন এবং তাদের মধ্যে ডিউরেশন সেট করুন।
3. AnimatedBuilder বা CustomPainter ব্যবহার করে অ্যানিমেশন গুলোকে UI তে রেন্ডার করুন।

Staggered Animation এর উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Staggered Animation Example',
      home: StaggeredAnimationScreen(),
    );
  }
}

class StaggeredAnimationScreen extends StatefulWidget {
  @override
  _StaggeredAnimationScreenState createState() => _StaggeredAnimationScreenState();
}

class _StaggeredAnimationScreenState extends State<StaggeredAnimationScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _widthAnimation;
  late Animation<double> _heightAnimation;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    );

    _widthAnimation = Tween<double>(begin: 50.0, end: 200.0).animate(
      CurvedAnimation(parent: _controller, curve: Interval(0.0, 0.5, curve: Curves.ease)),
    );

    _heightAnimation = Tween<double>(begin: 50.0, end: 200.0).animate(
      CurvedAnimation(parent: _controller, curve: Interval(0.5, 1.0, curve: Curves.ease)),
    );

    _colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(
      CurvedAnimation(parent: _controller, curve: Interval(0.0, 1.0, curve: Curves.ease)),
    );

    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Staggered Animation')),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Container(
              width: _widthAnimation.value,
              height: _heightAnimation.value,
              color: _colorAnimation.value,
            );
          },
        ),
      ),
    );
  }
}

উদাহরণের ব্যাখ্যা:

• AnimationController: _controller তৈরি করা হয়েছে, যা ৩ সেকেন্ডের ডিউরেশন নিয়ে কনফিগার করা হয়েছে।
• Width Animation: _widthAnimation ০ থেকে ৫০% সময়ের মধ্যে _controller এর সাথে সংযুক্ত করে একটি ওয়াইড অ্যানিমেশন তৈরি করা হয়েছে।
• Height Animation: _heightAnimation ৫০% থেকে ১০০% সময়ের মধ্যে _controller এর সাথে সংযুক্ত করে একটি হাইট অ্যানিমেশন তৈরি করা হয়েছে।
• Color Animation: _colorAnimation পুরো ডিউরেশন জুড়ে _controller এর সাথে সংযুক্ত করে কালার অ্যানিমেশন তৈরি করা হয়েছে।
• AnimatedBuilder: AnimatedBuilder ব্যবহার করে অ্যানিমেশনগুলোকে একটি Container এর মধ্যে রেন্ডার করা হয়েছে।

Hero এবং Staggered Animation এর সুবিধা:

Hero Animation:

• সহজে দুই স্ক্রিনের মধ্যে অ্যানিমেটেড ট্রানজিশন তৈরি করতে।
• UI এর নির্দিষ্ট অংশের উপর ফোকাস ধরে রাখতে সাহায্য করে।

Staggered Animation:

• একাধিক অ্যানিমেশনকে ধারাবাহিকভাবে বা সিকোয়েন্সে সাজিয়ে আরো জটিল এবং সুসংগত অ্যানিমেশন তৈরি করতে।
• UI কে আরও ইন্টারেক্টিভ এবং প্রানবন্ত করে।

সংক্ষেপে:

• Hero Animation: দুটি স্ক্রিনের মধ্যে একটি নির্দিষ্ট Widget এর অ্যানিমেটেড ট্রানজিশন তৈরি করে।
• Staggered Animation: একাধিক অ্যানিমেশনকে সিকোয়েন্সে সাজিয়ে UI তে প্রভাব ফেলে।

Flutter এ Hero Animation এবং Staggered Animations ব্যবহার করে আপনার অ্যাপের UI কে আরও ইন্টারেক্টিভ এবং আকর্ষণীয় করা যায়।